<template>
  <div class="container">
    <van-search
      v-model="value"
      show-action
      shape="round"
      background="#5b9d93"

      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <div class="box">
      <div class="h">
        <van-icon name="coupon-o"></van-icon>
        知识分享
      </div>
      <div class="main">
        <div class="item" v-for="(item,i) in list">
          <div class="cnt">
            <div class="h4">{{ item.title }}</div>
            <span>{{ item.tag }}</span>
          </div>

          <div class="img">
            <img :src="item.img" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="more">
      <div class="h">
        <van-icon name="fire-o"></van-icon>
        精选消息
      </div>
      <div class="itemList" v-for="(item,i) in moreList">
        <div class="label">
          <van-icon name="passed"></van-icon> {{item.label}}
        </div>
        <div class="item" v-for="(it,i) in item.cnt">
          <div class="img">
            <img :src="it.img" alt="">
          </div>
          <div class="cnt">
            <div class="title">
              {{ it.title }}jkhkjhkjhk就会看见百花竞开的态度大天朝台风天才体会过
            </div>
            <div class="desc">
              {{ it.desc }}
            </div>
            <span>{{ it.time }}</span>
          </div>
        </div>
      </div>

    </div>
    <div class="test">

    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";

const list = reactive([
  {
    title: "精选资料",
    tag: "学长学姐精心整理",
    img: require("/public/1.png")
  },
  {
    title: "经验分享",
    tag: "考研、求职、生活",
    img: require("/public/2.png")
  }
])
const moreList = reactive([
  {
    label: "每周必做题库",
    cnt: [
      {
        "title": "数据结构",
        'img': "https://img2.baidu.com/it/u=3302082280,1759992095&fm=253&fmt=auto&app=138&f=GIF?w=1213&h=500",
        'desc': "prim最小生成树",
        "time": "2023-11-20"
      },
      {
        "title": "数据结构",
        'img': "https://img2.baidu.com/it/u=3302082280,1759992095&fm=253&fmt=auto&app=138&f=GIF?w=1213&h=500",
        'desc': "prim最小生成树",
        "time": "2023-11-20"
      }, {
        "title": "数据结构",
        'img': "https://img2.baidu.com/it/u=3302082280,1759992095&fm=253&fmt=auto&app=138&f=GIF?w=1213&h=500",
        'desc': "prim最小生成树",
        "time": "2023-11-20"
      },


    ]
  }
])
</script>

<style scoped lang="less">
.container {
  .h {
    color: #2c3e50;
    font-size: 19px;
    font-weight: bold;

  }

  .box {
    width: 95%;
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .main {
      display: flex;
      flex-direction: row;
      height: 100px;
      align-items: center;
      width: 100%;
      justify-content: space-between;

    }

    .item {
      background: #F2F6FC;
      width: 49%;
      display: flex;
      height: 70px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 5px;
      box-sizing: border-box;
      border-radius: 7px;

      .cnt {
        .h4 {
          color: #2c3e50;
          font-size: 16px;
          font-weight: bold;
        }

        span {
          font-size: 10px;
          color: #C0C4CC;
        }

      }

      .img {
        width: 50%;
        height: 50px;

        img {
          width: 100%;
          height: 100%;

        }


      }
    }
  }

  .more {
    .label{
      color:#409EFF;
      font-weight: bold;
    }
    width: 95%;
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .itemList {
      margin:10px auto;
      background-image: linear-gradient(to bottom, #DFF5E7FF 0, #ffffff 40px);
      padding: 10px;
      width: 90%;
      border-radius: 7px;

    }

    .item {
      margin:10px auto;
      display: flex;
      flex-direction: row;
      border-bottom: .4px solid #e3dada;

      .img {
        width: 30%;
        height: 50px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .cnt {
        text-align: start;
        width: 70%;
        .title{
           color: #2c3e50;
          font-size: 16px;
          font-weight: bold;
        }
        .desc{
            color: #606266;
          font-size: 14px;
        }

        .title,
        .desc
        {
          text-align: start;
          text-indent: 1em;
          width: 100%;
 white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
          box-sizing: border-box;
        }


      }
      span{
         margin:0 15px;
        color:#C0C4CC;
        font-size: 14px;
      }

    }
  }
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

</style>
